<template>
  <div class="bg">
    <v-form ref="form" class="frm" lazy-validation v-if="!flag">
      <v-text-field v-model="phone" :rules="phoneRule" label="手机" required> </v-text-field>
      <v-text-field v-model="password" :rules="pwdRule" label="密码" required> </v-text-field>

      <v-row>
        <v-col cols="12" md="8">
          <v-text-field label="验证码" v-model="verifyCode" required></v-text-field>
        </v-col>
        <v-col cols="12" md="4">
          <img class="verify" @click.prevent="getVerifyCode" ref="codeImg">
        </v-col>
      </v-row>

      <v-checkbox v-model="savePwd" label="记住密码"></v-checkbox>

      <v-btn color="success mr-4" @click="submit">登录</v-btn>
      <v-btn color="error" @click="reset">重置</v-btn>
    </v-form>

    <v-dialog v-model="flag" max-width="500" v-else>
      <v-card>
        <v-card-title class="headline grey lighten-2 c2">
          登录成功
        
        </v-card-title>

        <div class="c2" style="display:flex;flex-direction: column; align-items:center;">
          <v-img
            style="height:150px;width:150px;border-radius:50%;box-shadow: 1px 1px 1px #000000;"
            :src="avatar"
          ></v-img>
          <v-card-text>
            现在进入我的博客
          </v-card-text>
        </div>

        <v-divider></v-divider>

        <v-card-actions class="c1">
          <v-spacer></v-spacer>
          <v-btn color="primary" text @click="redirect">I accept</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-overlay absolute z-index="5" class="mask"></v-overlay>
  </div>
</template>

<script>
export default {
  data: () => ({
    phone: '18261163859',
    password: '123123',
    phoneRule: [(v) => !!v || '手机号不可为空', (v) => (v && v.length === 11) || '手机号必须为11位'],
    pwdRule: [(v) => !!v || '密码不可为空'],
    savePwd: false,
    flag: false,
    verifyCode:'',
    avatar:'',
  }),
  created(){
      this.getVerifyCode();
  },
  methods: {
    redirect(){
      this.flag = false;
      this.$router.push('/');
    },
    reset() {
      this.$refs.form.reset()
    },
    getVerifyCode(){
      //点击验证码，即请求验证码去填充图片
      this.axios.get('/captcha?phone='+this.phone,{responseType:'blob'}).then(res=>{
        let img=this.$refs.codeImg;
        let url=window.URL.createObjectURL(res.data);
        img.src=url;
      })
    },
    submit() {
      this.axios({
        method: 'POST',
        url: '/captchaLogin',
        data: {
          phone: this.phone,
          password: this.password,
          captcha:this.verifyCode
        }
      }).then((res) => {
          console.log(res);
        if (res.data.code === 1) {
          this.flag = true;
          this.avatar=res.data.data.avatar;
          this.$store.commit('login',res.data.data);
          
        }
      }).catch(err=>{
          console.log(err)
      })
    }
  }
}
</script>

<style>
.frm {
  background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
  border-radius: 10px;
  z-index: 10;
  width: 400px;
  padding: 20px;
  opacity: 0.9;
  box-shadow: 3px 3px 3px #000000;
}

.bg {
  height: 100vh;
  width: 100%;
  background: url('../assets/bg/denys-nevozhai-Tix_89QaKVY-unsplash.jpg');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mask {
  background-image: linear-gradient(to right,#bf30ac 0%,#0f9d58 100%);
  opacity: 0.45;
  z-index: 5;
}

.c1{
  background: #c6ffdd;  /* fallback for old browsers */     
   background: -webkit-linear-gradient(to right, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(198, 255, 221), rgb(251, 215, 134), rgb(247, 121, 125)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}

.c2{
  background: #12c2e9;  /* fallback for old browsers */      
  background: -webkit-linear-gradient(to right, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(18, 194, 233), rgb(196, 113, 237), rgb(246, 79, 89)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}

.c3{
  background: #dd3e54;  /* fallback for old browsers */      
  background: -webkit-linear-gradient(to right, rgb(221, 62, 84), rgb(107, 229, 133));  /* Chrome 10-25, Safari 5.1-6 */      background: linear-gradient(to right, rgb(221, 62, 84), rgb(107, 229, 133)); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */      
}

</style>
